<template>
  <div class="container active-sale">
    <!-- 产品分类 -->
    <div class="product-tabs">
      <switch-tab 
        :tabList="tabList" 
        :styleType="2"
        :curTabIndex="curTabIndex"
        @itemClicked="tabClicked" 
      />
      <!-- 硬核直降 -->
      <div class="list list-1" v-if="curTabIndex===0">
        <div 
          class="item" 
          v-for="(item, index) in cutPriceProduct" 
          :key="index"
          @click="goToProduct(item.ProductId)"
        >
          <div class="img">
            <img :src='item.ImagePath' />
          </div>
          <div class="dis">
            <div class="tit">{{item.ProductName}}</div>
            <div class="tip"></div>
            <div class="btnout">
              <div class="price">
                <em>¥</em><h3>{{item.MinSalePrice.split('.')[0]}}</h3><span>硬核价</span>
                <p>¥{{item.MarketPrice}}</p>
              </div>
              <div class="btngo">
                抢购
                <img src='../../assets/img/icon-flash.png' />
              </div>
            </div>
            <div class="time">每件直降{{item.diffPrice}}元，只剩{{item.Stock}}件</div>
          </div>
        </div>
      </div>
      <!-- 多件多折 -->
      <div class="list list-2" v-if="curTabIndex===1">
        <div 
          class="item" 
          v-for="(item, index) in manyPriceProduct" 
          :key="index"
          @click="goToProduct(item.ProductId)"
        >
          <div class="img">
            <img :src='item.ImagePath' />
          </div>
          <div class="dis">
            <div class="tit">{{item.ProductName}}</div>
            <div class="tip"></div>
            <div class="prices">
              <div 
                class="price-item"
                :class="'price-item-'+indexIn"
                v-for="(itemIn, indexIn) in item.LadderPrice" :key="indexIn"
              >
                {{itemIn.MinBath}}件¥{{itemIn.Price}}
              </div>
            </div>
            <div class="godetail">
              <div class="price-one">
                <h3><em>¥</em><span>{{item.LadderPrice[0].Price}}</span></h3>
                <p>¥{{item.MarketPrice}}</p>
              </div>
              <div class="gobtn">查看详细</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 限时秒杀 -->
      <div class="list list-3" v-if="curTabIndex===2">
        <div 
          class="item" 
          v-for="(item, index) in limitProducts" 
          :key="index"
          @click="goToProduct(item.ProductId)"
        >
          <div class="img">
            <img :src='item.ProductImg' />
          </div>
          <div class="dis">
            <div class="tit">{{ item.ProductName }}</div>
            <div class="tip"></div>
            <div class="btnout">
              <div class="price">
                <em>¥</em><h3>{{ item.MinPrice }}</h3><span>秒杀价</span>
                <p>¥{{item.MarketPrice}}</p>
              </div>
              <div class="btngo">
                秒杀
                <img src='../../assets/img/icon-flash.png' />
              </div>
            </div>
            <div class="time">
              剩余时间 
              {{limitRealTimeList[index].days === '00' ? '':limitRealTimeList[index].days + '天'}}
              {{limitRealTimeList[index].hours}} :
              {{limitRealTimeList[index].mins}} :
              {{limitRealTimeList[index].secs}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchTab from 'components/common/SwitchTab'
import { getActiveProductList } from '../../network/productList'
import { getLimitTimeBuy } from '../../network/best'
import { getQueryString } from '../../utils/'
import { format } from 'date-fns'

export default {
  name: 'ActiveSale',
  components: {
    SwitchTab,
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      curTabIndex: 0,
      tabList: [
        '硬核直降',
        '多件多折',
        '限时秒杀'
      ],
      cutPriceProduct: [],
      manyPriceProduct: [],
      limitProducts: [],
      limitProductsToday: [],
      limitRealTimeList: [],
      timeDiff: 0,
    }
  },
  mounted() {
    let activeSort = getQueryString('activeSort')
    this.curTabIndex = activeSort ? Number(activeSort) : this.curTabIndex

    // 获取硬核直降、多件多折商品列表
    getActiveProductList({
      UserKey: this.userKey
    }, res => {
      console.log(res)
      this.cutPriceProduct = res.cutPriceProduct
      this.manyPriceProduct = res.manyPriceProduct
    })

    // 获取秒杀列表
    getLimitTimeBuy((list, severTime) => {
      list = list.map(item => {
        let startDate = format(new Date(item.StartDate), 'yyyy-MM-dd')
        let nowDate = format(new Date(), 'yyyy-MM-dd')

        let nowHour = format(item.StartDate, 'HH:mm')
        item.TodayHour = nowHour
        let isTimePast = new Date(item.StartDate).getTime() <
                          new Date().getTime()
        item.status = isTimePast ? '疯抢中':'即将开始'
        
        return item
      })
      this.limitProducts = list
      this.limitProductsToday = list.filter(item => {
        return item.TodayHour
      })
      
      // 获取实时更新时间
      this.getLimitRealTimeList(list, severTime, 'firstTime')
      setInterval(() => {
        this.getLimitRealTimeList(list, severTime)
      }, 1000);
    })
  },
  methods: {
    getLimitRealTimeList(list, severTime, type){
      this.limitRealTimeList = []
      list.map(item => {
        let limitRealTime = this.getLimitRealTime(severTime, item.EndDate, type)
        this.limitRealTimeList.push(limitRealTime)
      })
    },
    getLimitRealTime(severTime, endDate, type){
      let nowTime = new Date().getTime()
      if(type === 'firstTime'){
        this.timeDiff = nowTime - severTime
        console.log(this.timeDiff)
      }
      let endTime = new Date(endDate).getTime()
      let totalSecs = (endTime - nowTime + this.timeDiff)/1000
      let days = Math.floor(totalSecs/3600/24)
      let hours = Math.floor((totalSecs-days*24*3600)/3600)
      let mins = Math.floor((totalSecs-days*24*3600-hours*3600)/60)
      let secs = Math.floor((totalSecs-days*24*3600-hours*3600-mins*60))
      return {
        days: this.numberDouble(days),
        hours: this.numberDouble(hours),
        mins: this.numberDouble(mins),
        secs: this.numberDouble(secs),
      }
    },
    numberDouble(num){
      if(num<10){
        num='0'+num
      }
      return num
    },
    tabClicked(e){
      this.curTabIndex = e
    },
    goToProduct(id){
      this.$router.push({
        path: '/product',
        query: {
          id,
        }
      })
    },
  },
}
</script>

<style scoped>
.list{
  padding: 10px;
}
.list .item{
  display: flex;
  justify-content: space-between;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 6px;
  background-color: #fff;
}
.list .item .img{
  flex-shrink: 0;
  flex-grow: 0;
  width: 136px;
  height: 136px;
  overflow: hidden;
}
.list .item .img img{
  width: 136px;
  height: 136px;
  object-fit: cover;
  border-radius: 5px;
}
.list .item .dis{
  flex-grow: 1;
  padding-left: 15px;
}
.list .item .dis .tit{
  font-size: 15px;
  line-height: 1.4;
  height: 40px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.list .item .dis .tip{
  min-height: 18px;
  color: #999;
  font-size: 14px;
  padding: 5px 0;
}
.list .item .dis .btnout{
  display: flex;
  align-items: center;
  height: 45px;
  color: #fff;
  border-radius: 50px;
  background-color: #000;
  margin-left: -5px;
}
.list .item .dis .btnout .price{
  display: flex;
  align-items: baseline;
  padding-left: 20px;
  flex-wrap: wrap;
  flex-grow: 1;
  line-height: 1;
}
.list .item .dis .btnout .price em{
  font-size: 14px;
  padding-right: 3px;
}
.list .item .dis .btnout .price h3{
  display: inline-block;
  font-size: 16px;
}
.list .item .dis .btnout .price span{
  font-size: 12px;
  opacity: .8;
  padding-left: 5px;
}
.list .item .dis .btnout .price p{
  width: 100%;
  font-size: 12px;
  opacity: .8;
  text-decoration: line-through;
}
.list .item .dis .btnout .btngo{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 15px;
  height: 100%;
  padding-right: 12px;
  padding-left: 17px;
  background-color: #FF4F0F;
  border-radius: 0 50px 50px 0;
}
.list-1 .item .dis .btnout .btngo{
  background-color: #D50721;
}
.list .item .dis .btnout .btngo img{
  width: 16px;
  margin-left: 3px;
  margin-top: 2px;
}
.list .item .dis .time{
  font-size: 15px;
  padding-top: 5px;
  font-size: 12px;
}
.list-1 .item .dis .time{
  color: #999;
}
.list-2 .prices{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-2 .prices .price-item{
  width: 47%;
  line-height: 30px;
  text-align: center;
  border: 1px solid #D50721;
  color: #D50721;
  border-radius: 30px;
  box-sizing: border-box;
}
.list-2 .prices .price-item-0{
  display: none;
}
.list-2 .godetail{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 10px;
}
.list-2 .item .dis .tip{
  min-height: 16px;
  padding: 2px 0;
}
.list-2 .price-one{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.list-2 .price-one h3{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  line-height: 1;
}
.list-2 .price-one h3 em,
.list-2 .price-one h3 span{
  color: #D50721;
}
.list-2 .price-one h3 em{
  padding-right: 2px;
  font-size: 12px;
}
.list-2 .price-one h3 span{
  font-size: 16px;
}
.list-2 .price-one p{
  text-decoration: line-through;
  font-size: 12px;
  color: #999;
  padding-left: 5px;
}
.list-2 .gobtn{
  width: 47%;
  font-size: 14px;
  line-height: 28px;
  height: 30px;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  background-color: #D50721;
}
</style>

<style>
.active-sale .switch-tab-2 .item{
  flex-grow: 1;
}
</style>